<!----地图组件--->
<!---
    setSite
---->
<template>
    <div id="boxapp">
        <div id="containerBox"></div>
        <!-- <div id="panel"></div> -->
        <div id="myPageTop">
            <div class="label">请输入关键字：</div>
            <div class="input"><input id="tipinput" placeholder="请输入关键字"/></div>
        </div>
        <div class="posMsg" v-if="row.location">
            <div class="lng flex"><div class="label">经度</div> <div class="value">{{row.location[0]}}</div></div>
            <div class="lng flex"><div class="label">纬度</div> <div class="value">{{row.location[1]}}</div></div>
            <div class="lng flex">
                <div class="label">地址</div>
                <div class="value">{{row.name}}</div>
            </div>
            <div class="lng flex">
                <div class="label">详细地址</div>
                <div class="value">{{row.address}}</div>
            </div>
            <div class="btn">
                <el-button size="mini" style="width:120px" type="primary" @click="setSite">选择位置</el-button>
                <div style="padding-top:10px;">
                    <el-button size="mini" style="width:120px" @click="cancel">取消</el-button>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>

    export default {
        name: 'mapSite',
        data(){
            return {
                mapBox:"",
                row:{},
                marker:""
            }
        },
        destroyed(){
            //this.map.destroy();
        },
        methods:{
            //取消
            cancel(){
                this.$emit("cancel",false);
            },
            //选择位置
            setSite(){
                this.$emit("setSite",this.row);
            },
            //标记中心点
            rate(center){
                var than = this;
                if(this.marker){
                    this.marker.setPosition([center.lng,center.lat]);
                }else{
                    this.marker = new AMap.Marker({
                        content:"<img style='width:20px;height:30px;' src='//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'/>",
                        position: [center.lng,center.lat],
                        offset: new AMap.Pixel(-10,-30)
                    });
                    this.marker.setMap(this.mapBox);
                }
                
                AMap.plugin('AMap.Geocoder', function() {
                    var geocoder = new AMap.Geocoder({
                        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                        city: '010'
                    })
                    
                    var lnglat = [center.lng,center.lat];

                    geocoder.getAddress(lnglat, function(status, result) {
                        
                        if (status === 'complete' && result.info === 'OK') {
                            // result为对应的地理位置详细信息
                            var pro = result.regeocode.addressComponent;
                            console.log(result);
                            than.row = {
                                address:pro.township+pro.street+pro.streetNumber,
                                name:pro.province+" "+pro.city+" "+pro.district,
                                location:lnglat
                            };
                            //than.$emit("setSite",than.row);
                        }
                    })
                })
                
                // this.$emit("setSite",{
                //     name:e.data.name,
                //     address:e.data.address?e.data.address:e.data.name,
                //     location:[e.data.location.lng,e.data.location.lat]
                // })
                
            }
        },
        mounted(){
            var than = this;
            //地图加载
            this.mapBox = new AMap.Map("containerBox", {
                resizeEnable: true,
                zoom: 12
            });
            //输入提示
            var autoOptions = {
                input: "tipinput"
            };
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: this.mapBox,
                //panel:"panel"
            });  //构造地点查询类
            
            this.rate(than.mapBox.getCenter());
            AMap.event.addListener(auto,"select",function(e){
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
                console.log(e.poi);
                if(e.poi.location){
                    than.row = {
                        name:e.poi.name,
                        address:Array.isArray(e.poi.address)?e.poi.district:e.poi.address,
                        location:[e.poi.location.lng,e.poi.location.lat]
                    }
                    //than.$emit("setSite",than.row);
                }
                
            });//注册监听，当选中某条记录时会触发
            AMap.event.addListener(placeSearch,"markerClick", function(e){
                than.rate({
                    lng:e.data.location.lng,
                    lat:e.data.location.lat
                })
                than.mapBox.setZoomAndCenter(11,[e.data.location.lng,e.data.location.lat]);
            })
            this.mapBox.on("click",function(res){
                than.rate({
                    lng:res.lnglat.lng,
                    lat:res.lnglat.lat
                })
                than.mapBox.setZoomAndCenter(11,[res.lnglat.lng,res.lnglat.lat]);
            })
            this.mapBox.on('mapmove', function(){
                var center = than.mapBox.getCenter();
                than.rate(center);
            });
            this.mapBox.on('zoomend', function(){
                var center = than.mapBox.getCenter();
                than.rate(center);
            });
        }
    }
</script>

<style scoped lang="scss">
    #boxapp{
        width: 100%;
        height: 600px;
        position: relative;
        #containerBox{
            width: 100%;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
            background: #f5f5f5;
            .search-box{
                margin-bottom: 10px;
            }
        }
        .posMsg{
            height: 115px;
            background: #fff;
            overflow: hidden;
            border-top:1px solid #ecf5ff;
            padding: 10px;
            box-sizing: border-box;
            left: 0;
            font-size: 12px;
            position:relative;
            .btn{
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
            }
            .lng{
                line-height: 20px;
                color: #999;
                span{
                    color: #0067FF;
                }
            }
            .flex{
                display: flex;
                .label{
                    width: 60px;
                    text-align: right;
                    padding-right: 10px;
                }
                .value{
                    overflow : hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    width: calc(100% - 200px);
                    color: #222;
                    font-size: 12px;
                    font-weight: 900;
                }
            }
        }
        #myPageTop{
            position: absolute;
            left: 0;
            top: 0;
            background: #fff;
            width: 290px;
            padding: 10px;
            box-shadow: 0 0 7px 0px rgba(0,0,0,0.5);
            .label{
                font-size: 12px;
                color: #999;
            }
            .input{
                width: 270px;
                height: 32px;
                line-height: 32px;
                margin: 10px 0;
                input{
                    display: block;
                    width: 100%;
                    height: 30px;
                    border: none;
                    outline: none;
                    padding: 0 10px;
                    border-radius: 5px;
                    border: 1px solid #dcdfe6;
                }
                input:focus{
                    border-color: #409EFF;
                    transition: all 0.5s;
                }
            }
        }
    }
    
</style>

